<template>
  <el-aside width="280px">
    <el-scrollbar>
      <div class="sb-title" style="font-size: 20px;text-align: center;padding: 20px 0;background-color: linen">光伏能源数字智能管理平台</div>
      <el-menu :default-active="route.fullPath" class="el-menu-vertical-demo" style="height: 100vh;" :router="true">
        <!-- 动态菜单渲染 -->
        <div v-for="data in datalist" :key="data.path">
          <el-sub-menu :index="data.path" v-if="data.children.length">
            <template #title>
              <el-icon><component :is="mapIcons[data.icon]"></component></el-icon>
              <span>{{ data.title }}</span>
            </template>
            <div v-for="item in data.children" :key="item.path">
              <el-menu-item :index="item.path">
                <el-icon></el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </div>
          </el-sub-menu>
          <el-menu-item :index="data.path" v-else>
            <el-icon>
              <component :is="mapIcons[data.icon]"></component>
            </el-icon>
            <span>{{ data.title }}</span>
          </el-menu-item>
        </div>
        <!-- 站点大屏特殊菜单项 -->
        <el-menu-item @click="goto">
          <el-icon>
            <icon-fullscreen/>
          </el-icon>
          <span>站点大屏</span>
        </el-menu-item>
        <el-menu-item @click="goto_self">
          <el-icon>
            <icon-bookmark/>
          </el-icon>
          <span>未知-点点看</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import {Aim, DataLine, Film, Sunny, Warning, Operation, FullScreen} from '@element-plus/icons-vue'
import {getMenu} from '../../apis/user'
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()
const datalist = ref([])
const mapIcons = {Aim, DataLine, Film, Sunny, Warning, Operation, FullScreen}

// 异步获取菜单数据
const getList = async () => {
  const res = await getMenu()
  if (res.data.code == 200) {
    datalist.value = res.data.data
  }
}

// 站点大屏新窗口打开
const goto = () => {
  window.open('/Largescreen', '_blank')
}

const goto_self = () => {
  window.open('/Other/Other', '_self')
}

onMounted(() => {
  getList()
  // 默认跳转到光伏概览页面
  if (!route.path || route.path === '/mainbox') {
    router.push('/index')
  }
})
</script>

<style scoped>
.sb-title {
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  z-index: 1000; /* 确保顶部悬浮 */
  background-color: #ffffff; /* 白色背景 */
}
</style>